<template>
  <div>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="12">
            <router-link to="/home">后台系统</router-link>
          </el-col>
          <el-col :span="12">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{info.name}}
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="logout">安全退出</el-dropdown-item>
                <el-dropdown-item>个人信息</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside>
          <el-scrollbar style="height:100%">
            <div class="menus">
              <el-menu :default-active="activeIndex">
                <el-submenu index="1" v-if="info.type == 1" ref="test">
                  <template slot="title">
                    <i class="el-icon-setting"></i>
                    <span>系统设置</span>
                  </template>
                  <el-menu-item index="1-1" @click="goto('1-1', '商品分类')">商品分类</el-menu-item>
                  <el-menu-item index="1-2" @click="goto('1-2', '经营范围')">经营范围</el-menu-item>
                  <el-menu-item index="1-3" @click="goto('1-3', '常规配置')">常规配置</el-menu-item>
                </el-submenu>
                <el-submenu index="3" v-if="info.type == 1">
                  <template slot="title">
                    <i class="el-icon-s-cooperation"></i>
                    <span>运营管理</span>
                  </template>
                  <el-menu-item index="3-1" v-if="info.type == 1" @click="goto('3-1', '运营列表')">运营列表</el-menu-item>
                </el-submenu>
                <el-submenu index="4" v-if="info.type == 1">
                  <template slot="title">
                    <i class="fa fa-university"></i>
                    <span>学校管理</span>
                  </template>
                  <el-menu-item index="4-1" @click="goto('4-1', '学校列表')">学校列表</el-menu-item>
                </el-submenu>
                <!-- <el-submenu index="5" v-if="info.type == 2">
                  <template slot="title">
                    <i class="fa fa-cog"></i>
                    <span>配置管理</span>
                  </template>
                  <el-menu-item index="5-1" @click="goto('5-1', '配置列表')">配置列表</el-menu-item>
                </el-submenu> -->
                <!-- <el-submenu index="6" v-if="info.type == 2">
                  <template slot="title">
                    <i class="fa fa-clock-o"></i>
                    <span>超时管理</span>
                  </template>
                  <el-menu-item index="6-1" @click="goto('6-1', '超时列表')">超时列表</el-menu-item>
                </el-submenu> -->
                <el-submenu index="7" v-if="info.type == 1 || info.type == 2">
                  <template slot="title">
                    <i class="fa fa-jpy"></i>
                    <span>财务管理</span>
                  </template>
                  <el-menu-item index="7-1" @click="goto('7-1', '财务列表')">财务列表</el-menu-item>
                </el-submenu>
                <el-submenu index="8" v-if="info.type == 1 || info.type == 2 || info.type == 3 || info.type == 4">
                  <template slot="title">
                    <i class="el-icon-s-order"></i>
                    <span>订单管理</span>
                  </template>
                  <el-menu-item index="8-1" @click="goto('8-1', '订单列表')">订单列表</el-menu-item>
                </el-submenu>
                <el-submenu index="9" v-if="info.type == 2">
                  <template slot="title">
                    <i class="fa fa-university"></i>
                    <span>校园管理</span>
                  </template>
                  <el-menu-item index="9-1" @click="goto('9-1', '学校列表')">学校列表</el-menu-item>
                  <el-menu-item index="9-2" @click="goto('9-2', '商品餐盒费')">商品餐盒费</el-menu-item>
                </el-submenu>
                <el-submenu index="10" v-if="info.type == 2">
                  <template slot="title">
                    <i class="fa fa-star"></i>
                    <span>评论管理</span>
                  </template>
                  <el-menu-item index="10-1" @click="goto('10-1', '用户评论')">用户评论</el-menu-item>
                </el-submenu>
                <el-submenu index="11" v-if="info.type == 2">
                  <template slot="title">
                    <i class="fa fa-check-square-o"></i>
                    <span>会员管理</span>
                  </template>
                  <el-menu-item index="11-1" @click="goto('11-1', '商户列表')">商户列表</el-menu-item>
                  <el-menu-item index="11-2" @click="goto('11-2', '用户列表')">用户列表</el-menu-item>
                </el-submenu>
                <el-submenu index="12" v-if="info.type == 5">
                  <template slot="title">
                    <i class="fa fa-check-square-o"></i>
                    <span>信息管理</span>
                  </template>
                  <el-menu-item index="12-1" @click="goto('12-1', '套餐管理')">套餐管理</el-menu-item>
                  <el-menu-item index="12-2" @click="goto('12-2', '商品列表')">商品列表</el-menu-item>
                  <el-menu-item index="12-3" @click="goto('12-3', '销售记录')">销售记录</el-menu-item>
                  <el-menu-item index="12-4" @click="goto('12-4', '订单记录')">订单记录</el-menu-item>
                </el-submenu>
                <el-submenu index="13" v-if="info.type == 5">
                  <template slot="title">
                    <i class="fa fa-jpy"></i>
                    <span>商家财务管理</span>
                  </template>
                  <el-menu-item index="13-1" @click="goto('13-1', '商家财务列表')">商家财务列表</el-menu-item>
                </el-submenu>
                <el-submenu index="14" v-if="info.type == 6">
                  <template slot="title">
                    <i class="fa fa-check-square-o"></i>
                    <span>信息管理</span>
                  </template>
                  <el-menu-item index="14-1" @click="goto('14-1', '订单记录')">订单记录</el-menu-item>
                </el-submenu>
                <el-submenu index="15" v-if="info.type == 7">
                  <template slot="title">
                    <i class="fa fa-check-square-o"></i>
                    <span>信息管理</span>
                  </template>
                  <el-menu-item index="15-1" @click="goto('15-1', '订单记录')">订单记录</el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <el-tabs v-model="activeIndex" type="card" closable @tab-click="tabClick" @tab-remove="removeTab">
            <el-tab-pane v-for="(item) in tabsList" :key="item.name" :label="item.title" :name="item.name" effect="dark"></el-tab-pane>
          </el-tabs>
          <keep-alive :include="includePageNames">
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
// import { login } from '@/network/api.js'
export default {
  name: 'home',
  data() {
    return {
      info: {}, // 个人信息
      activeIndex: '', // 默认打开最有一次
      itemList: [], // 左边点击过的列表
      tabsList: [], // 右侧tab列表
      routerList: {
        '1-1': { path: '/home/category', component: 'category' },
        '1-2': { path: '/home/scope', component: 'scope' },
        '1-3': { path: '/home/config', component: 'config' },
        // '2-1': { path: '/home/plat', component: 'plat' },
        '3-1': { path: '/home/superoperate', component: 'superoperate' },
        // '3-2': { path: '/home/platoperate', component: 'platoperate' },
        '4-1': { path: '/home/school', component: 'school' },
        '5-1': { path: '/home/operateconf', component: 'operateconf' },
        '6-1': { path: '/home/overtime', component: 'overtime' },
        '7-1': { path: '/home/finance', component: 'finance' },
        '8-1': { path: '/home/order', component: 'order' },
        '9-1': { path: '/home/dormitory', component: 'dormitory' },
        '9-2': { path: '/home/lunchboxfee', component: 'lunchboxfee' },
        '10-1': { path: '/home/comment', component: 'comment' },
        '11-1': { path: '/home/store', component: 'store' },
        '11-2': { path: '/home/user', component: 'user' },
        '12-1': { path: '/home/goodsconf', component: 'goodsconf' },
        '12-2': { path: '/home/goods', component: 'goods' },
        '12-3': { path: '/home/sell', component: 'sell' },
        '12-4': { path: '/home/orderlog', component: 'orderlog' },
        '13-1': { path: '/home/storefinance', component: 'storefinance' },
        '14-1': { path: '/home/financeorderlog', component: 'financeorderlog' },
        '15-1': { path: '/home/schfinanceorderlog', component: 'schfinanceorderlog' }
      }, // 路由
      includePageNames: []
    }
  },
  mounted() {},
  created() {
    const info = this.$storage.get('info')
    const token = this.$storage.get('token')
    if (info === null || token === null) {
      this.$storage.del('token')
      this.$storage.del('info')
      this.$router.push('/login').catch(() => {})
      return this.$message.error('登录失效，请重新登录')
    }
    this.info = info
    const itemList = localStorage.getItem('itemList') === null ? [] : localStorage.getItem('itemList')
    const tabsList = localStorage.getItem('tabsList') === null ? [] : localStorage.getItem('tabsList')
    const activeIndex = localStorage.getItem('activeIndex') === null ? '' : localStorage.getItem('activeIndex')
    const includePageNames = localStorage.getItem('includePageNames') === null ? [] : localStorage.getItem('includePageNames')
    if (itemList.length > 0 && tabsList.length > 0 && activeIndex !== '' && includePageNames.length > 0) {
      this.itemList = JSON.parse(itemList)
      this.tabsList = JSON.parse(tabsList)
      this.includePageNames = JSON.parse(includePageNames)
      this.activeIndex = activeIndex
      this.$router.push(this.routerList[activeIndex].path).catch(() => {})
    } else {
      localStorage.removeItem('itemList')
      localStorage.removeItem('tabsList')
      localStorage.removeItem('activeIndex')
      localStorage.removeItem('includePageNames')
      this.itemList = []
      this.tabsList = []
      this.includePageNames = []
      this.activeIndex = ''
    }
  },
  methods: {
    goto(index, title) {
      if (this.itemList.indexOf(index) < 0) {
        this.itemList.push(index)
        localStorage.setItem('itemList', JSON.stringify(this.itemList))
        this.tabsList.push({
          title,
          name: index
        })
        localStorage.setItem('tabsList', JSON.stringify(this.tabsList))
        this.includePageNames.push(this.routerList[index].component)
        localStorage.setItem('includePageNames', JSON.stringify(this.includePageNames))
      }
      this.activeIndex = index
      localStorage.setItem('activeIndex', this.activeIndex)
      this.$router.push(this.routerList[index].path).catch(() => {})
    },
    removeTab(targetName) {
      const tabs = this.tabsList
      let activeName = this.activeIndex
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }
      this.tabsList = tabs.filter(tab => tab.name !== targetName)
      this.itemList.splice(this.itemList.indexOf(targetName), 1)
      this.includePageNames.splice(this.includePageNames.indexOf(this.routerList[targetName].component), 1)
      let path = ''
      if (this.itemList.length === 0) {
        this.activeIndex = ''
        path = '/home'
      } else {
        this.activeIndex = activeName
        path = this.routerList[this.activeIndex].path
      }
      localStorage.setItem('itemList', JSON.stringify(this.itemList))
      localStorage.setItem('activeIndex', this.activeIndex)
      localStorage.setItem('tabsList', JSON.stringify(this.tabsList))
      localStorage.setItem('includePageNames', JSON.stringify(this.includePageNames))
      // console.log(path)
      this.$router.push(path).catch(() => {})
      // console.log(targetName)
    },
    tabClick(tab) {
      if (this.routerList[tab.name].component !== this.$route.name) this.$router.push(this.routerList[tab.name].path).catch(() => {})
    },
    handleCommand(command) {
      switch (command) {
        case 'logout':
          this.$storage.del('token')
          this.$storage.del('info')
          localStorage.removeItem('itemList')
          localStorage.removeItem('tabsList')
          localStorage.removeItem('activeIndex')
          localStorage.removeItem('includePageNames')
          this.itemList = []
          this.tabsList = []
          this.includePageNames = []
          this.activeIndex = ''
          this.$router.push('/login').catch(() => {})
          this.$message.warning('您已安全退出')
          break
      }
    }
  }
}
</script>
<style lang="less">
.el-aside {
  width: 200px !important;
  height: calc(100vh - 45px);
  border-right: solid 1px #e6e6e6;
  // font-size: 14px;
  // padding-bottom: 120px;
}
.el-menu {
  border-right: 0;
}
.menus {
  padding-bottom: 50px;
}
.el-header {
  height: 45px !important;
  padding: 0;
  background-color: #222;
}
// .el-main {
//   // padding: 0;
//   // background-color: red;
// }
.el-submenu__title:focus,
.el-submenu__title:hover,
.el-menu-item:focus,
.el-menu-item:hover,
.el-menu-item.is-active,
.el-tabs__item.is-active,
.el-tabs__item:hover {
  background-color: #009688;
  color: #fff;
  i {
    color: #fff;
  }
}
.el-submenu .el-menu-item {
  min-width: auto;
}
.el-row {
  .el-col {
    line-height: 45px;
    a {
      padding-left: 20px;
      font-size: 18px;
      color: #fff;
    }
  }
}
.menus {
  padding-right: 10px;
}
.el-main {
  // padding: 0;
  padding-top: 1px;
  padding-bottom: 0;
  overflow: hidden;
}
.el-dropdown {
  float: right;
  margin-right: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 14px;
}
.el-submenu .el-menu-item {
  font-size: 12px;
  height: 40px;
  line-height: 40px;
}
.el-submenu__title {
  font-size: 12px;
  line-height: 40px;
  height: 40px;
}
.el-tabs__item {
  font-size: 12px;
}
</style>
